<template>
  <div class="ele-body ele-body-card">
    <el-row :gutter="15">
      <!--  v-if="store_id==0&&role_type==1" -->
      <el-col v-bind="styleResponsive ? { lg: 24, md: 24, sm: 24 } : { span: 24 }">
        <VisitHour />
      </el-col>
      <!-- <el-col v-else
              v-bind="styleResponsive ? { lg: 24, md: 24, sm: 24 } : { span: 24 }">
        <VisitHours />
      </el-col> -->
      <el-col v-bind="styleResponsive ? { lg: 24, md: 24, sm: 24 } : { span: 24 }">
        <el-row :gutter="15">
          <el-col v-bind="styleResponsive ? { lg: 8, md: 8, sm: 24 } : { span: 8 }">
            <StatisticsCard @userInfo="userInfoFn"
                            :packageSettlementBol="packageSettlementBol"
                            :consumptionSettlementBol="consumptionSettlementBol"
                            :balanceRechargeBol="balanceRechargeBol" />
          </el-col>
          <el-col v-bind="styleResponsive ? { lg:8, md: 8, sm: 24 } : { span: 8 }">
            <el-row :gutter="15">
              <el-col v-bind="styleResponsive ? { lg: 24, md: 24, sm: 24 } : { span: 24 }">
                <SaleCard />
              </el-col>
              <el-col v-if="role_type==1"
                      v-bind="styleResponsive ? { lg:24, md: 24, sm: 24 } : { span: 24 }">
                <HotSearch />
              </el-col>
              <el-col v-else
                      v-bind="styleResponsive ? { lg:24, md: 24, sm: 24 } : { span: 24 }">
                <quickEntrance />
              </el-col>

            </el-row>

          </el-col>
          <el-col v-bind="styleResponsive ? { lg:8, md: 8, sm: 24 } : { span: 8 }">
            <cashierType @totlelPrice="changePrice"
                         @showSettlement="showSettlement"
                         @balanceRecharge="balanceRechargeFn"
                         @packageSettlement="packageSettlementFn"
                         @consumptionSettlement='consumptionSettlementFn'
                         :cancelCouponIndex="cancelCouponIndex"
                         :userInfo="userInfo" />
          </el-col>
          <!-- <el-col v-bind="styleResponsive ? { lg:8, md: 8, sm: 24 } : { span: 8 }">
            <el-row :gutter="15"
                    v-if="!(store_id==0&&role_type==1)">

              <el-col v-bind="styleResponsive ? { lg:24, md: 24, sm: 24 } : { span: 24 }">
                <quickEntrance />
              </el-col>

            </el-row>

          </el-col> -->
        </el-row>

      </el-col>
      <!-- <el-col v-bind="styleResponsive ? { lg: 24, md: 24, sm: 24 } : { span: 24 }">
        <statistics @cancelCoupon="cancelCoupon"
                    :showStatistics="isShowSettlement"
                    :totloPrice="totloPrice" />
      </el-col> -->
    </el-row>
  </div>
</template>
  
  <script>
import { pirate } from '@/api/version/index'
import StatisticsCard from './components/statistics-card.vue';
import SaleCard from './components/sale-card.vue';
import VisitHour from './components/visit-hour.vue';
import VisitHours from './components/visit-hours.vue';
import HotSearch from './components/hot-search.vue';
import statistics from './components/statistics.vue'
import cashierType from './components/cashierType.vue'
import quickEntrance from './components/quickEntrance.vue'
export default {
  name: 'DashboardAnalysis',
  components: {
    StatisticsCard,
    SaleCard,
    VisitHour,
    HotSearch,
    statistics,
    cashierType,
    VisitHours,
    quickEntrance
  },
  data () {
    return {
      totloPrice: null,
      userInfo: null,
      isShowSettlement: false,
      store_id: null,
      role_type: null,
      cancelCouponIndex: null,
      balanceRechargeBol: false,
      packageSettlementBol: false,
      consumptionSettlementBol: false

    }
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive () {
      return this.$store.state.theme.styleResponsive;
    }
  },
  created () {

  },
  // 路由刷新
  activated () {

    this.init();
    // console.log(window.localstorage.getItem('login').store_id)
    console.log(this.$store.state.user.info.store_id)
    this.store_id = this.$store.state.user.info.store_id
    this.role_type = this.$store.state.user.info.role_type
  },
  methods: {
    packageSettlementFn (e) {
      console.log(e)
      this.packageSettlementBol = e
    },
    balanceRechargeFn (e) {
      console.log(e)
      this.balanceRechargeBol = e
    },
    consumptionSettlementFn (e) {
      console.log(e)
      this.consumptionSettlementBol = e
    },
    cancelCoupon (e) {
      console.log(e, '触发么==========')
      this.cancelCouponIndex = e
    },
    async init () {
      const res = await pirate()
      console.log(res)
    },
    changePrice (e) {
      console.log('totloPrice', e)
      this.totloPrice = e
    },
    userInfoFn (e) {
      console.log('totloPrice', e)
      this.userInfo = e
    },
    showSettlement (e) {
      console.log(e)
      this.isShowSettlement = e
    }
  }
};
  </script>
  